{{ define "js"}}
{{end}}

{{ define "css"}}
{{end}}

{{ define "content"}}
    <div class="my-3">
        <div class="d-md-flex py-2 justify-content-md-between">
            <h1 class="h4 mb-1 mb-md-0">
                {{if gt .PreviousEpoch 0}}
                    <a href="/epoch/{{.PreviousEpoch}}"><i class="fa fa-chevron-left"></i></a>
                {{end}}
                <span class="ml-1 mr-1"><i class="fas fa-history mr-2"></i>Epoch {{.Epoch}}</span>
                {{if gt .NextEpoch 0}}
                    <a href="/epoch/{{.NextEpoch}}"><i class="fa fa-chevron-right"></i></a>
                {{end}}
            </h1>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb font-size-1 mb-0" style="padding:0; background-color:transparent;">
                    <li class="breadcrumb-item"><a href="/" title="Home">Home</a></li>
                    <li class="breadcrumb-item"><a href="/epochs" title="Epochs">Epochs</a></li>
                    <li class="breadcrumb-item active" aria-current="page">Epoch details</li>
                </ol>
            </nav>
        </div>
    </div>

    <div class="card">
        <div class="card-body px-0 py-1">
            <div class="row border-bottom p-3 mx-0">
                <div class="col-md-3">Epoch:</div>
                <div class="col-md-9">{{.Epoch}}</div>
            </div>
            <div class="row border-bottom p-3 mx-0">
                <div class="col-md-3">Finalized:</div>
                <div class="col-md-9">
                    {{if .Finalized}}
                        <span class="badge bg-success text-white">Yes</span>
                    {{else}}
                        <span class="badge bg-warning text-dark">No</span>
                    {{end}}
                </div>
            </div>
            <div class="row border-bottom p-3 mx-0">
                <div class="col-md-3">Time:</div>
                <div class="col-md-9"><span aria-ethereum-date="{{.Ts.Unix}}">{{.Ts}}</span> (<span
                            aria-ethereum-date="{{.Ts.Unix}}" aria-ethereum-date-format="FROMNOW"></span>)
                </div>
            </div>
            <div class="row border-bottom p-3 mx-0">
                <div class="col-md-3">Attestations:</div>
                <div class="col-md-9">{{.AttestationsCount}}</div>
            </div>
            <div class="row border-bottom p-3 mx-0">
                <div class="col-md-3">Deposits:</div>
                <div class="col-md-9">{{.DepositsCount}}</div>
            </div>
            <div class="row border-bottom p-3 mx-0">
                <div class="col-md-3">Slashings <span data-toggle="tooltip" data-placement="top"
                                                      title="Proposers">P</span>
                    / <span
                            data-toggle="tooltip" data-placement="top" title="Attesters">A</span>:
                </div>
                <div class="col-md-9">{{.ProposerSlashingsCount}} / {{.AttesterSlashingsCount}}</div>
            </div>
            <div class="row border-bottom p-3 mx-0">
                <div class="col-md-3">Voting Participation:</div>
                <div class="col-md-9">
                    <div>{{.VotedEther | formatBalance}} of {{.EligibleEther | formatBalance}}<small
                                class="text-muted ml-1">({{.GlobalParticipationRate | formatPercentage}}%)</small></div>
                    <div class="progress" style="height:5px; width: 250px;">
                        <div class="progress-bar" role="progressbar"
                             style="width: {{.GlobalParticipationRate | formatPercentage}}%;"
                             aria-valuenow="{{.GlobalParticipationRate | formatPercentage}}" aria-valuemin="0"
                             aria-valuemax="100"></div>
                    </div>
                </div>
            </div>
            <div class="row border-bottom p-3 mx-0">
                <div class="col-md-3">Validators:</div>
                <div class="col-md-9">{{.ValidatorsCount}}</div>
            </div>
            <div class="row border-bottom p-3 mx-0">
                <div class="col-md-3">Avg. Validator Balance:</div>
                <div class="col-md-9">{{.AverageValidatorBalance | formatBalance}}</div>
            </div>
            <a style="cursor:pointer;" data-toggle="collapse" data-target="#epoch-blocks" aria-expand="true" aria-controls="epoch-blocks" class="row p-3 mx-0 collapsed">
                <div style="position:relative" class="col-md-3">Blocks: </div>
                <div class="col-md-9"></i> {{.BlocksCount}}</div>
            </a>
        </div>
    </div>
    
    <div id="epoch-blocks" class="card my-3 collapse show">
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table">
                    <thead>
                    <tr>
                        <th>Slot</th>
                        <th>Status</th>
                        <th>Time</th>
                        <th>Proposer</th>
                        <th>Root Hash</th>
                        <th>Attestations</th>
                        <th>Deposits</th>
                        <th>Slashings <span data-toggle="tooltip" data-placement="top"
                                            title="Proposers">P</span> /
                            <span data-toggle="tooltip" data-placement="top" title="Attesters">A</span></th>
                        <th>Exits</th>
                    </tr>
                    </thead>
                    <tbody>
                    {{range .Blocks}}
                        <tr>
                            <td><a href="/block/{{.Slot}}">{{.Slot}}</a></td>
                            <td class="text-capitalize">{{formatBlockStatus .Status}}</td>
                            <td aria-ethereum-date="{{.Ts.Unix}}"
                                aria-ethereum-date-format="FROMNOW">{{.Ts.Format "2006-01-02T15:04:05"}}</td>
                            <td><a href="/validator/{{.Proposer}}">{{.Proposer}}</a></td>
                            <td class="text-monospace">
                                {{ if eq .Status 1}}
                                    <a href="/block/{{printf "%x" .BlockRoot}}">0x{{printf "%.4x" .BlockRoot}}...</a>
                                {{else}}
                                    N/A
                                {{end}}
                            </td>
                            <td>{{.Attestations}}</td>
                            <td>{{.Deposits}}</td>
                            <td>{{.Proposerslashings}} / {{.Attesterslashings}}</td>
                            <td>{{.Exits}}</td>
                        </tr>
                    {{end}}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
{{end}}